<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
		
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
	</head>

	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<!-- <div class="page-header">
				<h1>
					PV、UV统计
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						统计列表
					</small>
				</h1>
			</div> -->
			<div class="row">
				<div class="col-sm-12">
					<div class="tabbable">
						<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
							<li class="active">
								<a data-toggle="tab" href="#pvuv">PV、UV统计</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane in active" id="pvuv">
								<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
									<div class="row">
										<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/travel/pvUvList">
											<div class="col-xs-2">
												<div class="dataTables_length">
													<label>渠道
														<select aria-controls="dynamic-table" class="form-control input-sm" name="firstChannelVO" id="firstChannelVO">
															<#list firstChannelTypeList as firstChannelType>
																<option value="${firstChannelType.value}" <#if conditionVO.firstChannelVO == firstChannelType.value>selected</#if>>${firstChannelType.showName}</option>
															</#list>
														</select>
													</label>
												</div>
											</div>
											<div class="col-xs-2">
												<div class="dataTables_length">
													<label>在线状态
														<select name="offOnVO" id="offOnVO" aria-controls="dynamic-table" class="form-control input-sm">
															<#list offOnTypeList as offOnType>
																<option value="${offOnType.value}" <#if conditionVO.offOnVO == offOnType.value>selected</#if>>${offOnType.showName}</option>
															</#list>
														</select>
													</label>
												</div>
											</div>
											<div class="col-xs-2 col-sm-3">
												<div class="dataTables_length">
													<label>选择时段
														<input class="form-control" type="text" id="config-demo" name="chooseTimeVO" value="${conditionVO.chooseTimeVO}"/>
													</label>
												</div>
											</div>
											<div class="col-xs-3 col-sm-3">
												<div class="dataTables_length">
													<button type="submit" class="btn btn-pink btn-sm">
														<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
														查询
													</button>
												</div>
											</div>
										</form>
									</div>
									<table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
										<thead>
											<tr>
												<th>No.</th>
												<th>日期</th>
												<th>PV</th>
												<th>UV</th>
												<th>渠道</th>
												<th>在线状态</th>
											</tr>
										</thead>
										<tbody>
											<#if pVUVList?? && pVUVList?size&gt;0>
												<#list pVUVList as pVUV>
													<tr class="">
														<td>${pVUV_index + 1}</td>
														<td>${pVUV.createDate?string('yyyy-MM-dd')}</td>
														<td>${pVUV.pv!}</td>
														<td>${pVUV.uv!}</td>
														<td>${pVUV.firstChannel!}</td>
														<td><#if pVUV.offOn=="ON">在线</#if>
														<#if pVUV.offOn=="OFF">离线</#if></td>
													</tr>
												</#list>
											<#else>
												<tr>
													<td colspan="12">
														<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
													</td>
												</tr>
											</#if>
										</tbody>
									</table>
									<#include "paginator.html">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- basic scripts -->
		<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
		
		<script type="text/javascript">
			var message = "${message}";
			if(!isEmpty(message)) {
				showMsg(message);
			}
			jQuery(function($) {
				$('#config-demo').daterangepicker({
						startDate: new Date(new Date().getTime()-1*1000*60*60*24),
					    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
						/* startDate: new Date(new Date().getTime()-7*1000*60*60*24),
					    endDate: new Date(new Date().getTime()-1*1000*60*60*24), */
					    showDropdowns : true,  
			            showWeekNumbers : false,
			            timePicker : false,
			            timePicker12Hour : false,
			            ranges : {  
			            	'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			            	'最近7日': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
			                '最近30日': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
			                '最近90日': [moment().subtract(90, 'days'), moment().subtract(1, 'days')]
			            },
			            opens : 'right',  
			            buttonClasses : [ 'btn btn-default' ],  
			            applyClass : 'btn-small btn-pink',  
			            cancelClass : 'btn-small',  
			            format : 'yyyy-MM-dd',
			            separator : ' to ',
			            locale : {  
			                applyLabel : '确定',  
			                cancelLabel : '取消',  
			                fromLabel : '起始时间',  
			                toLabel : '结束时间',  
			                customRangeLabel : '自定义',  
			                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
			                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
			                        '七月', '八月', '九月', '十月', '十一月', '十二月' ],  
			                firstDay : 1  
			            }
					},
					function(start, end, label) {//格式化日期显示框  
			            
			            $('#config-demo').html(start.format('yyyy-MM-dd') + ' - ' + end.format('yyyy-MM-dd'));  
			       });
				
				var chooseTimeVO = "${conditionVO.chooseTimeVO}";
				$('#config-demo').val(chooseTimeVO);
			});
		</script>
	</body>
</html>